<template>
	<div class="room-list-setting">
		 <el-breadcrumb>
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/memberList' }">会员列表</el-breadcrumb-item>
      <el-breadcrumb-item>分销订单</el-breadcrumb-item>
    </el-breadcrumb>
		<div class="room-list-content">
			<el-form :rules="rules"
			  :model="ruleForm">
				<div class="room-header">
					<el-form-item>
						<el-cascader :options="options"
						  @change="handleItemChange"
						  :props="props"></el-cascader>
						<div class="search-input">
							<el-input placeholder="请输入酒店名/酒店ID/星级"
							  class="input-with-select">
								<el-button slot="append"
								  icon="el-icon-search"></el-button>
							</el-input>
							<el-button type="primary"
							  size="small"
							  style="float: right;"
							  @click="addSuppliers">新增房型</el-button>
							<el-button type="text"
							  size="small"
							  style="float: right; margin-right: 30px;"
							  @click="show">收起列表</el-button>
						</div>
					</el-form-item>
					<div class="carousel"
					  v-show="carouselShow">
						<el-form-item>
							<el-carousel trigger="click"
							  height="200px"
							  :autoplay="false"
							  arrow="never"
							  indicator-position="none">
								<el-carousel-item v-for="item in HoteltableData"
								  :key="item">
									<ul v-for="item in 4">
										<li v-for="item in HoteltableData"
										  @click="addRoomType">{{item.name}}</li>
									</ul>
								</el-carousel-item>
							</el-carousel>
						</el-form-item>
						<div class="pagination">
							<div class="pagination-left">
								<p>共搜索到48家酒店</p>
							</div>
							<div class="pagination-right">
								<el-pagination @size-change="handleHotelSizeChange"
								  @current-change="handleHotelCurrentChange"
								  :current-page="HotelCurrentPage"
								  :page-sizes="[10, 20, 30, 40]"
								  :page-size="HotelPageSize"
								  layout="total, prev, pager, next, jumper"
								  :total="HotelPageSize">
								</el-pagination>
							</div>
						</div>
					</div>
				</div>
				<el-form-item>
					<el-table :data="HoteltableData"
					  style="width: 100%"
					  min-height="250">
						<el-table-column fixed
						  prop="num "
						  label="酒店ID"
						  width="150">
						</el-table-column>
						<el-table-column prop="name"
						  label="酒店名称"
						  width="120">
						</el-table-column>
						<el-table-column prop="province"
						  label="所在省份"
						  width="120">
						</el-table-column>
						<el-table-column prop="city "
						  label="所在城市"
						  width="120">
						</el-table-column>
						<el-table-column prop="area"
						  label="所在区/县"
						  width="200">
						</el-table-column>
						<el-table-column prop="roomNum"
						  label="房间类型"
						  width="200">
						</el-table-column>
						<el-table-column prop="state"
						  label="客房数"
						  width="120">
						</el-table-column>
						<el-table-column fixed="right"
						  label="操作"
						  width="120">
							<template slot-scope="scope">
								<el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
								  type="text"
								  size="small">
									售卖房型
								</el-button>
								<el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
								  type="text"
								  size="small">
									编辑
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item style="margin-top: 20px;">
					<el-pagination @size-change="handleRoomSizeChange"
					  @current-change="handleRoomCurrentChange"
					  :current-page="RoomCurrentPage"
					  :page-sizes="[10, 20, 30, 40]"
					  :page-size="RoomPageSize"
					  layout="total, prev , pager , next, sizes, jumper"
					  :total="RoomPageSize">
					</el-pagination>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
const StaffAccount = () => import("@/components/setting/staff/StaffAccount");
const DepartmentSetting = () =>
  import("@/components/setting/staff/DepartmentSetting");
const PermissionsSetting = () =>
  import("@/components/setting/staff/PermissionsSetting");
const Breadcrumb = () => import("@/components/common/Breadcrumb");
export default {
  name: "Staff",
  data() {
    return {
      carouselShow: true,
      options: [
        {
          label: "江苏",
          cities: []
        },
        {
          label: "浙江",
          cities: []
        }
      ],
      props: {
        value: "label",
        children: "cities"
      },
      content: {
        firstTitle: "酒店管理",
        secondTitle: "房型列表",
        type: "close"
      },
      showDepartment: false,
      ruleForm: {
        name: "",
        superior: ""
      },
      rules: {
        name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
        superior: [{ required: true, message: "请输入上级部门" }]
      },
      RoomtableData: [],
      HoteltableData: [],
      RoomCurrentPage: 1,
      RoomPageSize: 10,
      HotelCurrentPage: 1,
      HotelPageSize: 10,
      RoomValue: {},
      HotelmValue: {}
    };
  },
  created() {
    this.RoomValue = {
      timestamp: 0,
      version: "string",
      operation: "string",
      pageSize: this.RoomPageSize,
      pageNum: this.RoomCurrentPage
    };

    this.HotelmValue = {
      timestamp: 0,
      version: "string",
      operation: "string",
      pageSize: this.HotelPageSize,
      pageNum: this.HotelCurrentPage
    };
    this.$http
      .post(
        "http://222.244.146.208/hotel/list?token=" + window.commo.token,
        this.HotelmValue
      )
      .then(res => {
        this.HoteltableData = res.data.list;
        console.log(res.data.list);
      });
  },
  mounted() {
    window.bus.$on("showDepartment", val => {
      this.showDepartment = val;
    });
  },
  methods: {
    show() {
      this.carouselShow
        ? (this.carouselShow = false)
        : (this.carouselShow = true);
    },
    handleItemChange(val) {
      setTimeout(_ => {
        if (val.indexOf("江苏") > -1 && !this.options2[0].cities.length) {
          this.options2[0].cities = [
            {
              label: "南京"
            }
          ];
        } else if (
          val.indexOf("浙江") > -1 &&
          !this.options2[1].cities.length
        ) {
          this.options2[1].cities = [
            {
              label: "杭州"
            }
          ];
        }
      }, 300);
    },
    handleClick() {},
    addSuppliers() {
      this.$router.push("/index/add_room");
    },
    addRoomType() {},
    saveDepartment() {
      this.showDepartment = false;
    },
    cancel() {
      this.showDepartment = false;
    },
    deleteRow(index, rows) {
      this.$confirm("是否继续操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {});
    },
    handleRoomSizeChange(val) {
      this.RoomPageSize = val;
      this.$http
        .post(
          "http://222.244.146.208//suppliers/all?token=" + window.commo.token,
          this.RoomValue
        )
        .then(res => {
          this.RoomtableData = res.data.suppliersInfoAllResponses;
        });
    },
    handleRoomCurrentChange(val) {
      this.RoomCurrentPage = val;
      this.$http
        .post(
          "http://222.244.146.208//suppliers/all?token=" + window.commo.token,
          this.RoomValue
        )
        .then(res => {
          this.RoomtableData = res.data.suppliersInfoAllResponses;
        });
    },
    handleHotelSizeChange(val) {
      this.HotelPageSize = val;
      this.$http
        .post(
          "http://222.244.146.208//suppliers/all?token=" + window.commo.token,
          this.RoomValue
        )
        .then(res => {
          this.RoomtableData = res.data.suppliersInfoAllResponses;
        });
    },
    handleHotelCurrentChange(val) {
      this.HotelCurrentPage = val;
      this.$http
        .post(
          "http://222.244.146.208//suppliers/all?token=" + window.commo.token,
          this.RoomValue
        )
        .then(res => {
          this.RoomtableData = res.data.suppliersInfoAllResponses;
        });
    }
  },
  components: {
    StaffAccount,
    DepartmentSetting,
    PermissionsSetting,
    Breadcrumb
  }
};
</script>
<style lang="scss">
.room-list-content {
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  position: relative;
  font-size: 12px;
  color: #415161;
  .el-table {
    /*调整th与td的宽度占比*/
    .el-table__body,
    .el-table__header {
      width: 100% !important;
    }
  }
  // 头部轮播
  .el-carousel {
    ul {
      li:hover {
        color: #6d2377;
        cursor: pointer;
      }
    }
  }
  .el-form {
    .el-form-item {
      .el-form-item__content {
        .el-cascader {
          float: left;
          margin-right: 30px;
        }
        .el-input {
          float: left;
          width: 400px;
          input {
            height: 30px;
            line-height: 30px;
          }
        }
        /*搜索input样式*/
        .el-input {
          width: 400px;
          input {
            height: 34px;
            line-height: 34px;
          }
          .el-input-group__append {
            padding: 0 14px;
            .el-button {
              margin: -14px;
            }
            button {
              padding: 8px 9px;
            }
          }
          .el-input-group__append:hover {
            background-color: #6d2377;
            color: #fff;
            border-radius: 0 4px 4px 0;
          }
        }
        /*搜索input样式结束*/
        .el-pagination {
          text-align: right;
          .el-pagination__jump {
            .el-input {
              float: none !important;
              width: 50px !important;
            }
          }
          .el-input {
            width: 100px;
          }
        }
      }
    }
  }
}
.expand-trigger div {
  height: 50px !important;
}
.increase {
  position: absolute;
  top: 0;
  left: 0;
  width: 96.5%;
  background: white;
  z-index: 3;
  padding: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  h1 {
    text-align: left;
    margin-bottom: 10px;
  }
  .el-form-item {
    .el-form-item__content {
      text-align: left;
      .el-input {
        width: 300px;
      }
    }
  }
}

.room-list-content .el-form .el-form-item .el-form-item__content {
  text-align: left;
  .el-select {
    width: 200px;
    margin-right: 20px;
    float: left;
  }
}
.room-list-content .el-form .el-form-item .el-form-item__content .el-input {
  width: 200px;
}
.el-table th {
  background-color: #e9ecf3;
}
.el-table--enable-row-transition .el-table__body td {
  text-align: left;
}
.el-pager li.active {
  background-color: rgb(105, 127, 147);
  color: white;
}
.el-pager li {
  min-width: 28px;
  background-color: rgb(236, 239, 247);
  margin: 0 5px;
  border-radius: 4px;
  color: rgb(134, 151, 167);
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
  color: rgb(134, 151, 167);
}
.el-pagination .btn-prev,
.el-pagination .btn-next {
  background-color: rgb(236, 239, 247);
  color: rgb(134, 151, 167);
  min-width: 28px;
}
.el-pagination .btn-prev {
  padding-right: 5px;
}
.el-pagination .btn-next {
  padding-left: 5px;
  margin-right: 20px;
}
.el-pagination__sizes {
  margin-right: 0;
}
.el-table__footer-wrapper,
.el-table__header-wrapper {
  background-color: #e9ecf3;
}

.room-list-content .el-form .el-form-item .el-form-item__content {
  .search-input {
    overflow: hidden;
    .input-with-select {
      width: 400px;
    }
  }
}

.room-list-content .el-form .el-form-item .el-form-item__content .el-cascader {
  line-height: 1;
}
.carousel {
  background-color: rgb(246, 246, 246);
}
.carousel {
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  ul {
    width: 25%;
    overflow: hidden;
    float: left;
    height: 90%;
    li {
      height: 22.5%;
      text-align: center;
      line-height: 4;
    }
  }
}
.pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  .pagination-left,
  .pagination-right {
    width: 50%;
    height: 40px;
  }
  .pagination-left {
    float: left;
    text-align: left;
    p {
      color: rgb(207, 215, 221);
      margin-left: 30px;
      line-height: 40px;
    }
  }
  .pagination-right {
    text-align: right;
    float: right;
    .el-pagination {
      line-height: 1;
      margin-right: 20px;
      .el-pagination__jump {
        margin-left: 0;
      }
      .el-pager {
        width: auto;
        float: none;
        li {
          width: 28px;
          height: 28px;
          line-height: 28px;
        }
      }
    }
  }
}
</style>
